/**
 * 封装的修改密码，适用于各个位置的弹窗
 */
import { logout, editPassword } from "@/api/login";
import { validateNewPassword } from "@/utils/elementValidate";
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElMessageBox,
} from "element-plus";
import { ref, h, reactive } from "vue";
import { useUserStore } from "@/store/modules/user";
import router from '@/router'
export const updatePassWord = (isQz: boolean = true) => {
  const elFormRef = ref<ComponentRef<typeof ElForm>>();
  const name = isQz ? "您的密码过于简单，请您修改密码后重新登录" : "";

  const userStore = useUserStore();

  const formData = reactive({
    newPassword: "",
    oldPassword: "",
  });
  ElMessageBox.prompt("", "修改密码", {
    confirmButtonText: "确认修改",
    showCancelButton: !isQz,
    showClose: !isQz,
    closeOnClickModal: !isQz,
    closeOnPressEscape: !isQz,
    showInput: false,
    message: () =>
      h("div", null, [
        h("div", { style: "margin-bottom:6px;" }, name),
        h(
          ElForm,
          {
            ref: elFormRef,
            labelPosition:'top',
            model: formData,
            style: "margin-top:15px;margin-bottom:6px;",
          },
          [
            h(
              ElFormItem,
              {
                label: "旧密码",
                prop: "oldPassword",
                rules: [
                  {
                    required: true,
                    message: "请输入旧密码",
                    trigger: "blur",
                  },
                ],
                style: "margin-top:15px;margin-bottom:25px;",
              },
              [
                h(ElInput, {
                  showPassword: true,
                  modelValue: formData.oldPassword,
                  "onUpdate:modelValue": (value: string) => {
                    console.log(value);
                    formData.oldPassword = value;
                  },
                }),
              ]
            ),
            h(
              ElFormItem,
              {
                label: "新密码",
                prop: "newPassword",
                style: "margin-top:25px;margin-bottom:6px;",
                rules: [
                  {
                    required: true,
                    message: "请输入新密码",
                    trigger: "blur",
                  },
                  {
                    validator: (rule, value, callback) =>
                      validateNewPassword(rule, value, callback),
                    trigger: "blur",
                  },
                ],
              },
              [
                h(ElInput, {
                  modelValue: formData.newPassword,
                  showPassword: true,
                  "onUpdate:modelValue": (value: string) => {
                    console.log(value);
                    formData.newPassword = value;
                  },
                }),
              ]
            ),
          ]
        ),
      ]),
    beforeClose: (action, instance, done) => {
      console.log(action);
      if (action === "confirm") {
        console.log(elFormRef.value);
        elFormRef.value?.validate((flag) => {

          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "提交中";
          if (!userStore.getUser?.id) return;
          editPassword({
            oldPassword:formData.oldPassword,
            password: instance.inputValue,
          })
            .then((res) => {
              done();
              ElMessage({
                type: "success",
                message: "修改成功",
              });
            })
            .catch(() => {
              instance.confirmButtonText = "确认修改";
            })
            .finally(() => {
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            });
        });
      } else {
        done();
      }
    },
  })
    .then(({ value }) => {
      const data = userStore.getuserInfo;
      logout(data!).then(() => {
        userStore.loginOut();
        userStore.setEditPass(true);
        router.push("/login");
      });
    })
    .catch(() => {});
};
